<template>
  <CommonForm :instanceId="instanceId" @remove="onRemove">
    <div @click="onclick">
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in options" :key="item.value" :label="item.label" :name="checkName"></el-checkbox>
      </el-checkbox-group>
    </div>
  </CommonForm>
</template>

<script>
import {mapState} from 'vuex'
import CommonForm from '../CommonForm'

export default {
  components: {CommonForm},
  name: 'CheckForm',
  data () {
    return {
      checkList: []
    }
  },
  props: {
    'options': {
      type: Array,
      default: () => {
        return [
          {
            label: '选项1',
            value: 1
          },
          {
            label: '选项2',
            value: 2
          }
        ]
      }
    },
    'checkName': {
      type: String,
      default: 'checkName'
    },
    'instanceId': {
      type: String,
      default: 'check1'
    }
  },
  methods: {
    onclick () {
      this.$emit('showProp', {
        propPane: 'CheckProp',
        instanceId: this.instanceId
      })
    },
    onRemove (instanceId) {
      this.$emit('remove', instanceId)
    }
  },
  computed: {
    ...mapState({
      // 'propId': this.state.formDesigner.data['instanceId']['propId']
    })
  }
}
</script>

<style scoped>

</style>
